
<script charset="utf-8" src="__PUBLIC__/js/jquery.ajaxfileupload.js"></script>
<label>File Input: <input type="file" name="file" id="demo1" /></label>
<script type="text/javascript">
    $(document).ready(function() {
        var interval;
        function applyAjaxFileUpload(element) {
            $(element).AjaxFileUpload({
                action: "{:U('Api/ajaxfileupload/upload')}",
                onChange: function(filename) {
                    // Create a span element to notify the user of an upload in progress
                    var $span = $("<span />")
                            .attr("class", $(this).attr("id"))
                            .text("Uploading")
                            .insertAfter($(this));
                    //$(this).remove();
                    $(this).attr('type','hidden');
                    interval = window.setInterval(function() {
                        var text = $span.text();
                        if (text.length < 13) {
                            $span.text(text + ".");
                        } else {
                            $span.text("Uploading");
                        }
                    }, 200);
                },
                onSubmit: function(filename) {
                    // Return false here to cancel the upload
                    /*var $fileInput = $("<input />")
                     .attr({
                     type: "file",
                     name: $(this).attr("name"),
                     id: $(this).attr("id")
                     });
                     $("span." + $(this).attr("id")).replaceWith($fileInput);
                     applyAjaxFileUpload($fileInput);
                     return false;*/
                    // Return key-value pair to be sent along with the file
                    return true;
                },
                onComplete: function(filename, response) {
                    window.clearInterval(interval);
                    var $span = $("span." + $(this).attr("id")).text(filename + " ");
                    $(this).val(response.filePath);
//                    var    $fileInput = $("<input />")
//                                    .attr({
//                                        type: "file",
//                                        name: $(this).attr("name"),
//                                        id: $(this).attr("id")
//                                    });
					$(element).val(response.filePath);
                    if (typeof(response.error) === "string") {
                        $span.replaceWith($fileInput);
                        applyAjaxFileUpload($fileInput);
                        alert(response.error);
                        return;
                    }
                    $("<a />")
                            .attr("href", "#")
                            .text("x")
                            .bind("click", function(e) {
                                $span.replaceWith('');
                                $(element).attr('type','file').removeAttr('value');

                                //applyAjaxFileUpload($fileInput);
                            })
                            .appendTo($span);
                }
            });
        }
        applyAjaxFileUpload("#demo1");

    });
</script>
